<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ESD监控数据分析</title>
    <link rel="stylesheet" href="../plugins/element-ui/index.css">
    <style>
        body {
            margin: auto;
            /* background-image: url('../images/bg.jpg'); */
            background-color: #030212;
        }
        .el-header{
            background-image: url('../images/TopImg.png');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }
        .box{  
            margin-left: 1vw;
            margin-bottom: 1vh; 
            position: relative;
        }
        .tit{ 
            display: flex; 
            align-items: flex-end;
        }
        .tit span{ 
            color: #daf9ff;
            background: url(../images/line1.png) no-repeat bottom right;
            font-size: 1.5vh;
            white-space: nowrap;
            padding-bottom: 1vh; 
            padding-right: 2vh;
        }
        .tit p{ 
            background: url(../images/line2.png) no-repeat bottom right;
            height: 1.2vh; 
            margin-bottom: 0.4vh; 
            opacity: 0.04vh ;
        }
        .boxnav{
            padding: 10px 0 ;
        }
        .numDetail{
            /* 垂直并排居中显示 */
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
    </style>
</head>
<body>
    <div id="app">
        <el-container style="height: 100vh;">
            <el-header height="6vh" style="display: flex;justify-content: center;align-items: center;">
                <div class="title" style="display: flex;justify-content: center;align-items: center;">
                    <div style="height: 6vh;">
                        <img :src="logoPath" style="height: 6vh;">
                    </div>
                    <div>
                        <strong style="color: aliceblue; font-size: 4vh;">ESD监控数据分析</strong>
                    </div>
                </div>
            </el-header>
            <el-main>
                <div class="time" id="showTime" style="color: aliceblue; position: absolute; right: 3vw; margin-top: -6vh; font-size: 1vw;">
                    {{currentTimeStr}}
                </div>
                <div style="position: absolute; left: 3vw; margin-top: -4vh; font-size: 1vw;">
                    <el-radio-group v-model="timeRadio">
                        <el-radio :label="1">当日</el-radio>
                        <el-radio :label="2">本周</el-radio>
                        <el-radio :label="3">本月</el-radio>
                    </el-radio-group>
                </div>
                <el-row>
                    <el-col :span="6">
                        <div class="box">
                            <div class="tit"><span>数据汇总</span><p style="width: 100%; "></p></div>
                            <div class="boxnav" style="height: 11vh; display: flex; border: #daf9ff solid 1px;">
                                <el-row type="flex" justify="center" style="width: 100%; text-align: center;" >
                                    <el-col :span="4">
                                        <div class="numDetail">
                                            <span style="color: aliceblue; font-size: 1.3vw;">{{statisticsData.total}}</span>
                                            <div style="display: flex; justify-content: center;align-items: center ;">
                                                <div style="width: 0.2vw; height: 0.4vw; 
                                                    background-color: rgb(240, 119, 240); border-radius: 0.05vw;"></div>
                                                <span style="color: #4bd7f3; font-size: 0.8vw;">总数量</span>
                                            </div>
                                        </div>
                                    </el-col>
                                    <el-col :span="4">
                                        <div class="numDetail">
                                            <span style="color: aliceblue; font-size: 1.3vw;">{{statisticsData.normal}}</span>
                                            <div style="display: flex; justify-content: center;align-items: center ;">
                                                <div style="width: 0.2vw; height: 0.4vw; 
                                                    background-color: #2cc203; border-radius: 0.05vw;"></div>
                                                <span style="color: #4bd7f3; font-size: 0.8vw;">正常</span>
                                            </div>
                                        </div>
                                    </el-col>
                                    <el-col :span="4">
                                        <div class="numDetail">
                                            <span style="color: aliceblue; font-size: 1.3vw;">{{statisticsData.error}}</span>
                                            <div style="display: flex; justify-content: center;align-items: center ;">
                                                <div style="width: 0.2vw; height: 0.4vw; 
                                                    background-color: #f73b2d; border-radius: 0.05vw;"></div>
                                                <span style="color: #4bd7f3; font-size: 0.8vw;">报警</span>
                                            </div>
                                        </div>
                                    </el-col>
                                    <el-col :span="4">
                                        <div class="numDetail">
                                            <span style="color: aliceblue; font-size: 1.3vw;">{{statisticsData.miss}}</span>
                                            <div style="display: flex; justify-content: center;align-items: center ;">
                                                <div style="width: 0.2vw; height: 0.4vw; 
                                                    background-color: #838181; border-radius: 0.05vw;"></div>
                                                <span style="color: #4bd7f3; font-size: 0.8vw;">失联</span>
                                            </div>
                                        </div>
                                    </el-col>
                                    <el-col :span="4">
                                        <div class="numDetail">
                                            <span style="color: aliceblue; font-size: 1.3vw;">{{statisticsData.standBy}}</span>
                                            <div style="display: flex; justify-content: center;align-items: center ;">
                                                <div style="width: 0.2vw; height: 0.4vw; 
                                                    background-color: #888621; border-radius: 0.05vw;"></div>
                                                <span style="color: #4bd7f3; font-size: 0.8vw;">待机</span>
                                            </div>
                                        </div>
                                    </el-col>
                                </el-row>
                                
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="9">
                        <div class="box">
                            <div class="tit"><span>失联终端</span><p style="width: 100%;" ></p></div>
                            <div class="boxnav" style="height: 11vh;">
                                <el-row v-for="(itemList , index) in missDataList" :key="index"
                                        :style="getRowStyle(index)" >
                                    <el-col v-for="(item , i) in itemList" :key="i"
                                            :span="8" style="display: flex;">
                                        <img :src="getChannelImg(item.channelName)" style="width: 2.7vw; height: 2.7vw;
                                           border-radius: 0.2vw; background-color: #838181;">
                                        <div class="numDetail" style="margin-left: 0.3vw;">
                                            <span style="color: aliceblue; font-size: 0.7vw;">ID:&nbsp;{{item.stationId}}</span>
                                            <span style="color: aliceblue; font-size: 0.7vw;">类型:&nbsp;{{item.channelName}}</span>
                                            <span style="color: aliceblue; font-size: 0.7vw;">位置:&nbsp;{{item.position}}</span>
                                        </div>
                                    </el-col>
                                </el-row>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="9">
                        <div class="box">
                            <div class="tit"><span>异常终端</span><p style="width: 100%;" ></p></div>
                            <div class="boxnav" style="height: 11vh;">
                                <el-row v-for="(errorItemList , j) in errorDataList" :key="j"
                                        :style="getRowStyle(j)"  >
                                    <el-col v-for="(errorItem , k) in errorItemList" :key="k"
                                            :span="8" style="display: flex;">
                                        <img :src="getChannelImg(errorItem.channelName)" style="width: 2.7vw; height: 2.7vw;
                                           border-radius: 0.2vw; background-color: #f73b2d;">
                                        <div class="numDetail" style="margin-left: 0.3vw;">
                                            <span style="color: aliceblue; font-size: 0.7vw;">ID:&nbsp;{{errorItem.stationId}}</span>
                                            <span style="color: aliceblue; font-size: 0.7vw;">类型:&nbsp;{{errorItem.channelName}}</span>
                                            <span style="color: aliceblue; font-size: 0.7vw;">位置:&nbsp;{{errorItem.position}}</span>
                                        </div>
                                    </el-col>
                                </el-row>
                            </div>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="6">
                        <div class="box">
                            <div class="tit"><span>终端状态占比</span><p style="width: 100%;" ></p></div>
                            <div class="boxnav" id="totalPiDiv" style="height: 25vh; border: #4bd7f3 solid 0.05vw;">
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="9">
                        <div class="box">
                            <div class="tit"><span>异常时间统计</span><p style="width: 100%;" ></p></div>
                            <div class="boxnav" id="errorTimeBar" style="height: 25vh; border: #4bd7f3 solid 0.05vw;">
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="9">
                        <div class="box">
                            <div class="tit"><span>终端稳定性排名（类别）</span><p style="width: 100%;" ></p></div>
                            <div class="boxnav" id="typeStableBar" style="height: 25vh; border: #4bd7f3 solid 0.05vw;">
                            </div>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="6">
                        <div class="box">
                            <div class="tit"><span>终端报警占比</span><p style="width: 100%;" ></p></div>
                            <div class="boxnav" id="typePiDiv" style="height: 30vh; border: #4bd7f3 solid 0.05vw;">
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="9">
                        <div class="box">
                            <div class="tit"><span>异常次数统计</span><p style="width: 100%;" ></p></div>
                            <div class="boxnav" id="errorCountBar" style="height: 30vh; border: #4bd7f3 solid 0.05vw;">
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="9">
                        <div class="box">
                            <div class="tit"><span>终端稳定性排名（产线）</span><p style="width: 100%;" ></p></div>
                            <div class="boxnav" id="lineStableBar" style="height: 30vh; border: #4bd7f3 solid 0.05vw;">
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </el-main>
        </el-container>
    </div>
<script src="../plugins/vue/vue.js"></script>
<script src="../plugins/element-ui/index.js"></script>
<script src="../plugins/axios/axios.js"></script>
<script src="../plugins/echart/echarts.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            timeRadio: 1,
            logoPath: null,
            statisticsData: {
                total: 0,
                normal: 0,
                error: 0,
                miss: 0,
                standBy: 0
            } ,
            statisticsClock: null ,
            errorCountClock: null ,
            errorTimeClock: null ,
            typeBarClock: null ,
            lineBarClock: null ,
            unNormalDataClock: null ,
            setTimeClock: null ,
            checkGatewayClock: null ,
            missDataList: [] ,
            errorDataList: [] ,
            currentTimeStr: null ,
        },
        created() {
            axios.get("/line/getLogoPath").then((res) => {
                this.logoPath = res.data;
            });
            this.statisticsClock = window.setInterval(function(){
                axios.get("/esdLog/getStatisticsData").then((res) => {
                    if (res.data.code === 0) {
                        app.statisticsData = res.data.data.resultMap;
                        let ecDemo = echarts.init(document.getElementById("totalPiDiv"));
                        let pieData = [
                            {
                                name: '正常',
                                value: res.data.data.resultMap.normal,
                                itemStyle: {color: '#2cc203'}
                            },
                            {
                                name: '异常',
                                value: res.data.data.resultMap.error,
                                itemStyle: {color: '#f82d1f'}
                            },
                            {
                                name: '失联',
                                value: res.data.data.resultMap.miss,
                                itemStyle: {color: '#5c5a5a'}
                            },
                            {
                                name: '待机',
                                value: res.data.data.resultMap.standBy,
                                itemStyle: {color: '#888621'}
                            }
                        ];

                        let ecDemo1 = echarts.init(document.getElementById("typePiDiv"));
                        let pieData1 = [
                            {
                                name: '台垫接地',
                                value: res.data.data.errorResultMap.td,
                                itemStyle: {color: '#5ab1ef'}
                            },
                            {
                                name: '手环接地',
                                value: res.data.data.errorResultMap.sh,
                                itemStyle: {color: '#ffb980'}
                            },
                            {
                                name: '设备接地',
                                value: res.data.data.errorResultMap.sb,
                                itemStyle: {color: '#d87a80'}
                            },
                            {
                                name: '离子风扇',
                                value: res.data.data.errorResultMap.fan,
                                itemStyle: {color: '#b6a2de'}
                            }
                        ];

                        let option = {
                            series : [
                                {
                                    type : 'pie',
                                    data : pieData ,
                                    label: {
                                        show : true ,
                                        color: 'aliceblue',
                                        formatter: function (args) {
                                            return args.data.name + ': ' + args.percent + '%';
                                        }
                                    },
                                    roseType : 'radius'
                                }
                            ]
                        }
                        let option1 = {
                            series : [
                                {
                                    type : 'pie',
                                    data : pieData1 ,
                                    label: {
                                        show : true ,
                                        color: 'aliceblue',
                                        formatter: function (args) {
                                            return args.data.name + ': ' + args.percent + '%';
                                        }
                                    },
                                    roseType : 'radius'
                                }
                            ]
                        }
                        ecDemo.setOption(option);
                        ecDemo1.setOption(option1);
                    };
                });
            }, 3000);
            this.unNormalDataClock = window.setInterval(function(){
                axios.get("/esdLog/getUnNormalData").then((res) => {
                    if (res.data.code === 0) {
                        app.missDataList = res.data.data.miss;
                        app.errorDataList = res.data.data.error;
                    }
                });
            }, 3000);

            this.setTimeClock = window.setInterval(function(){
                let currentTime = new Date();
                // 格式化年份
                const year = currentTime.getFullYear();
                // 格式化月份
                const month = (currentTime.getMonth() + 1).toString().padStart(2, '0'); // 使用padStart补齐前导零
                // 格式化日期
                const day = currentTime.getDate().toString().padStart(2, '0');
                const days = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
                app.currentDateStr = year + "年" + month + "月" + day + "日  ";
                let hours = currentTime.getHours();
                let minutes = currentTime.getMinutes();
                let seconds = currentTime.getSeconds();
                hours = hours < 10 ? '0' + hours : hours;
                minutes = minutes < 10 ? '0' + minutes : minutes;
                seconds = seconds < 10 ? '0' + seconds : seconds;
                // 这里 this指向的是window, 所以要使用 app
                app.currentTimeStr = year +"/" + month +"/" + day + " " + days[currentTime.getDay()] + "  " + hours + ":" + minutes + ":" + seconds;
            }, 1000);
            this.checkGatewayClock = window.setInterval(function(){
                axios.get("/gateway/checkLineGateway?lineName=allLine").then((res) => {
                    if (res.data.code === 0) {
                        let serverIps = "" ;
                        let gatewayStatus = res.data.data;
                        let index = 0 ;
                        for (let i = 0; i < gatewayStatus.length; i++) {
                            if (!gatewayStatus[i].connected){
                                if (index === 0){
                                    serverIps = serverIps + gatewayStatus[i].serverIp;
                                }else{
                                    serverIps = serverIps + "、" + gatewayStatus[i].serverIp;
                                }
                                index++ ;
                            }
                        }
                        if (index > 0){
                            app.$message({
                                type: 'error',
                                message: "网关: " + serverIps + " 出现异常！！"
                            });
                        }
                    }
                }).catch((err) => {
                    app.$message({
                        type: 'error',
                        message: "服务器出现异常！！"
                    });
                });
            }, 3000);
            this.errorCountClock = window.setInterval(function(){
                axios.get("/esdLog/errorCountBar/" + app.timeRadio).then((res) => {
                    if(res.data.code === 0){
                        let chartDom = document.getElementById('errorCountBar');
                        let myChart = echarts.init(chartDom);
                        let option = {
                            title:{
                                text:'生产线终端异常次数',
                                left:'center',
                                textStyle:{
                                    color:'#2EC7C9',
                                    fontSize:14,
                                    fontWeight:'bold'
                                }
                            },
                            xAxis: {
                                type: 'category',
                                data: res.data.data.lineNames,
                                axisLabel: {
                                    textStyle: {
                                        color: 'aliceblue' // 设置X轴标签字体颜色为红色
                                    }
                                }
                            },
                            yAxis: {
                                type: 'value' ,
                                show: false,
                            },
                            series: [
                                {
                                    data: res.data.data.timesList,
                                    type: 'bar',
                                    label: {
                                        show: true,
                                        position: 'top', // 顶部显示
                                        formatter: '{c}次', // 显示数据值
                                        textStyle: {
                                            color: 'aliceblue' // 设置柱状图顶部标签字体颜色为蓝色
                                        }
                                    },
                                    itemStyle: {
                                        borderRadius: [10, 10, 0, 0]
                                    },
                                    color:new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                                        {
                                            offset: 0,
                                            color: '#3861fb'
                                        },
                                        {
                                            offset: 1,
                                            color: '#2fc0d2'
                                        }
                                    ]),
                                }
                            ]
                        }
                        myChart.setOption(option);
                    }
                });
            }, 3000);

            this.errorTimeClock = window.setInterval(function(){
                axios.get("/esdLog/errorTimeBar/" + app.timeRadio).then((res) => {
                    if(res.data.code === 0){
                        let chartDom = document.getElementById('errorTimeBar');
                        let myChart = echarts.init(chartDom);
                        let option = {
                            title:{
                                text:'生产线终端异常时间',
                                left:'center',
                                textStyle:{
                                    color:'#2EC7C9',
                                    fontSize:14,
                                    fontWeight:'bold'
                                }
                            },
                            xAxis: {
                                type: 'category',
                                data: res.data.data.lineNames,
                                axisLabel: {
                                    textStyle: {
                                        color: 'aliceblue' // 设置X轴标签字体颜色为红色
                                    }
                                }
                            },
                            yAxis: {
                                type: 'value' ,
                                show: false,
                            },
                            series: [
                                {
                                    data: res.data.data.timeList,
                                    type: 'bar',
                                    label: {
                                        show: true,
                                        position: 'top', // 顶部显示
                                        formatter: '{c}分钟', // 显示数据值
                                        textStyle: {
                                            color: 'aliceblue' // 设置柱状图顶部标签字体颜色为蓝色
                                        }
                                    },
                                    itemStyle: {
                                        // borderRadius: 10, // 统一设置四个角的圆角大小
                                        borderRadius: [10, 10, 0, 0] //（顺时针左上，右上，右下，左下）
                                    },
                                    // 设置柱状渐变色
                                    color:new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                                        {
                                            offset: 0,
                                            color: '#3861fb'
                                        },
                                        {
                                            offset: 1,
                                            color: '#2fc0d2'
                                        }
                                    ]),
                                }
                            ]
                        }
                        myChart.setOption(option);
                    }
                });
            }, 3000);
            
            this.typeBarClock = window.setInterval(function(){
                axios.get("/esdLog/typeStableBar/" + app.timeRadio).then((res) => {
                    if(res.data.code === 0){
                        let chartDom = document.getElementById('typeStableBar');
                        let myChart = echarts.init(chartDom);
                        let option = {
                            title:{
                                text:'终端类型稳定性排名',
                                left:'center',
                                textStyle:{
                                    color:'#2EC7C9',
                                    fontSize:14,
                                    fontWeight:'bold'
                                }
                            },
                            xAxis: {
                                type: 'category',
                                data: res.data.data.names,
                                axisLabel: {
                                    textStyle: {
                                        color: 'aliceblue' // 设置X轴标签字体颜色为红色
                                    }
                                }
                            },
                            yAxis: {
                                type: 'value' ,
                                show: false,
                            },
                            series: [
                                {
                                    data: res.data.data.percents,
                                    type: 'bar',
                                    label: {
                                        show: true,
                                        position: 'top', // 顶部显示
                                        formatter: '{c}%', // 显示数据值
                                        textStyle: {
                                            color: 'aliceblue' // 设置柱状图顶部标签字体颜色为蓝色
                                        }
                                    },
                                    itemStyle: {
                                        // borderRadius: 10, // 统一设置四个角的圆角大小
                                        borderRadius: [10, 10, 0, 0] //（顺时针左上，右上，右下，左下）
                                    },
                                    // 设置柱状渐变色
                                    color:new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                                        {
                                            offset: 0,
                                            color: '#3861fb'
                                        },
                                        {
                                            offset: 1,
                                            color: '#2fc0d2'
                                        }
                                    ]),
                                }
                            ]
                        }
                        myChart.setOption(option);
                    }
                });
            }, 3000);

            this.lineBarClock = window.setInterval(function(){
                axios.get("/esdLog/lineStableBar/" + app.timeRadio).then((res) => {
                    if(res.data.code === 0){
                        let chartDom = document.getElementById('lineStableBar');
                        let myChart = echarts.init(chartDom);
                        let option = {
                            title:{
                                text:'生产线终端稳定性排名',
                                left:'center',
                                textStyle:{
                                    color:'#2EC7C9',
                                    fontSize:14,
                                    fontWeight:'bold'
                                }
                            },
                            xAxis: {
                                type: 'category',
                                data: res.data.data.names,
                                axisLabel: {
                                    textStyle: {
                                        color: 'aliceblue' // 设置X轴标签字体颜色为红色
                                    }
                                }
                            },
                            yAxis: {
                                type: 'value' ,
                                show: false,
                            },
                            series: [
                                {
                                    data: res.data.data.percents,
                                    type: 'bar',
                                    label: {
                                        show: true,
                                        position: 'top', // 顶部显示
                                        formatter: '{c}%', // 显示数据值
                                        textStyle: {
                                            color: 'aliceblue' // 设置柱状图顶部标签字体颜色为蓝色
                                        }
                                    },
                                    itemStyle: {
                                        // borderRadius: 10, // 统一设置四个角的圆角大小
                                        borderRadius: [10, 10, 0, 0] //（顺时针左上，右上，右下，左下）
                                    },
                                    // 设置柱状渐变色
                                    color:new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                                        {
                                            offset: 0,
                                            color: '#3861fb'
                                        },
                                        {
                                            offset: 1,
                                            color: '#2fc0d2'
                                        }
                                    ]),
                                }
                            ]
                        }
                        myChart.setOption(option);
                    }
                });
            }, 3000);
        },
        mounted(){

        },
        methods: {
            getChannelImg(channelTypeName){
                if (channelTypeName === 'ESD手环') {
                    return "../images/SVG/WH0.svg";
                } else if (channelTypeName === '设备接地') {
                    return "../images/SVG/EM0.svg";
                } else if (channelTypeName === '台垫接地') {
                    return "../images/SVG/RR0.svg";
                } else if (channelTypeName === '离子风扇'){
                    return "../images/SVG/EN0.svg";
                }else if (channelTypeName === '温度计'){
                    return "../images/SVG/TE1.svg";
                }else if (channelTypeName === '湿度计'){
                    return "../images/SVG/HU0.svg";
                }else if (channelTypeName === '尘埃粒子'){
                    return "../images/SVG/CL1.svg";
                }
            },
            getRowStyle(index){
                if(index === 1){
                    return {
                        'width': '100%',
                        'margin-top': '1vh',
                    }
                }else{
                    return {
                        'width': '100%',
                    }
                }
            }
        },
        beforeDestroy() {
            window.clearInterval(this.statisticsClock);
            window.clearInterval(this.unNormalDataClock);
            window.clearInterval(this.setTimeClock);
            window.clearInterval(this.checkGatewayClock);
            window.clearInterval(this.errorCountClock);
            window.clearInterval(this.errorTimeClock);
            window.clearInterval(this.typeBarClock);
            window.clearInterval(this.lineBarClock);
        }
    });
</script>
</body>
</html>